---

AULA02 - Estrutura de páginas web - Tags Básicas

---

AGENDA

• Sintaxe tags do HTML
• Estrutura semântica do HTML
• Unidades de medidas
• Tags básicas da estrutura do HTML
• Referências
• Perguntas

1. Sintaxe tags do HTML

• Como é sabido, HTML não é uma linguagem de programação. De acordo com MDN Web Docs (2022?), o HTML consiste em uma série de elementos utilizados para agrupar partes de conteúdos, exibindo-os de certa maneira. São diversas as tags que podem ser utilizadas para criar sua página.

• Exemplo:

<p>O componente curricular aborda os conhecimentos de desenvolvimento web</p>

• Sintaxe:
  • 1. tag de abertura: consiste no nome do elemento que está sendo utilizado, no caso <p> de parágrafo.
  • 2. conteúdo do elemento: representa o conteúdo do elemento -- O componente curricular aborda os conhecimentos de desenvolvimento web.
  • 3. tag de fechamento: indica onde o elemento termina, por meio do uso de uma barra antes do nome do elemento </p>.
  • Unindo os itens 1, 2 e 3 temos um elemento HTML que faz parte do modelo de documento (DOM).

---

2. Estrutura Semântica do HTML5

• A semântica refere-se ao significado da palavra na linguagem:

• A tag <b> e </b> aplica o negrito no texto informado entre elas e define um estilo sem significado semântico. Já a tag <strong> e </strong> tem estilo e significado semântico, indica urgência e seriedade quando o texto é lido por leitor de tela. Além de aplicar o negrito.

• A tag <i> e </i> insere o estilo itálico, sem significado semântico. Já a tag <em> e </em> tem o significado semântico de enfatizar o conteúdo.

Quadro: Significados semânticos

Tag	Tipo	Descrição
<b>conteúdo</b>	estilo	Formata o texto em negrito.
<i>conteúdo</i>	estilo	Formata o texto em itálico.
<em>conteúdo</em>	semântico	Efatiza o texto, colocando o texto em itálico.
<strong>conteúdo</strong>	semântico	Dá uma importância ao texto, colocando o texto em negrito, indicando urgência e seriedade.
<mark>conteúdo</mark>	semântico	Indica relevância.
<cite>conteúdo</cite>	semântico	Para citar o nome de um trabalho, tal como um livro, jogo, música.
<dfn>conteúdo</dfn>	semântico	Marcar a instância de definição de um termo.

Fonte: MDN Web Docs (2022?)

2.1. HTML Semântico

• Significado:
  • É o HTML que concentra no significado da informação nas páginas web ao invés de uma simples apresentação visual.
• Nas versões anteriores do HTML não haviam tags com uma semântica apropriada para cada uma dessas divisões.
• Dessa forma, os desenvolvedores acabavam usando a tag <div> e </div> para todas as situações, e criando seus próprios padrões de nomeclaturas através dos atributos id ou class (voltaremos nesse assunto em Propriedades de CSS).
• Uma boa ideia é usar ainda o atributo class para identificar porque esse elemento está sendo usado. Com isso, caso a apresentação precise ser alterada com o tempo, isso pode ser feito de forma seletiva utilizando as folhas de estilo.

2.2. Significado das tags Semânticas

<header>...</header>

• Contém as informações iniciais. É usado para definir o cabeçalho de uma página ou sessão, e pode conter logo, títulos, menu de navegação, campo de busca, etc.

<nav>...</nav>

• Contém os links para navegação no documento.

<section>...</section>

• Representa uma sessão do documento.

<article>...</article>

• Representa um artigo do documento.

<aside>...</aside>

• Conteúdo à parte do conteúdo principal.

<footer>...</footer>

• Conteúdo referente a informações do autor, direitos autorais, copyright, bloco de navegações ou links relacionados.

2.3. Exemplos de layout

Figura 1: Layouts com as disposições diversas das tags HTML semânticas

Fonte: Autoria própria		Fonte: Autoria própria

---

3. Unidades de Medidas

3.1. Medidas Relativas

Unidade	Descrição
em*	Relativo ao tamanho da fonte do elemento.
ex	Relativo ao x-height da fonte corrente (raro usar).
ch	Relativo a família de fontes. Definida com largura (width) de 0.
rem*	Relativo ao tamanho da fonte do elemento root .
vw	Relativo a 1% do width do viewport.
vh	Relativo a 1% da height do viewport.
vmin	Relativo a 1% da dimensão menor do viewport.
vmax	Relativo a 1% da dimensão maior do viewport.
%	Percentual.
	viewport = tamanho da janela do navegador
	se viewport = 50cm wide, 1vw = 0.5cm.

3.2. Medidas Absolutas

Unidade	Descrição	Equivalência
cm	Centímetros.
mm	Milímetros.
in	Polegadas.	1in = 96px = 2.54cm
px	Pixels.	1px = 1/96in
pt	Pontos.	1pt = 1/72in
	valor padrão dos navegadores = 16px
	1em = 100% = 16px

Observação:

• Para aprofundar no assunto, consulte o Guia de Unidades no CSS de Scalercio, Paulo (2019).

3.3. Tamanho padrão da fonte

• Tamanho da fonte padrão na página: 16px.

3.4. Tamanho padrão das tags de títulos

• As tags de títulos são pré-formatadas em negrito e com quebra de linha.
• Os tamanhos são distintos, desde o maior <h1>...</h1> até o menor, <h6>...</h6>.

Medida em: Tag	px	em
<h1>	32px	2em
<h2>	24px	1.5em
<h3>	20.8px	1.3em
<h4>	16px	1em
<h5>	12.8px	0.8em
<h6>	11.2px	0.7em

---

4. Tags básicas da estrutura do HTML

4.1 <!DOCTYPE html>

• O <!DOCTYPE html> (não é uma tag) é uma declaração DTD = Document Type Declaration e representa a primeira linha do documento HTML.
• É um jeito de indicar ao navegador qual é o tipo de documento e garantir que esse documento seja manipulado da mesma maneira em diferentes navegadores, devido ao modo padrão (Standard mode) que é um comportamento descrito pelas especificações HTML e CSS.
• Nas versões anteriores ao HTML5, a forma de se definir esta declaração seguia três padrões diferentes. Verifique os exemplos:
  • Exemplo1a
  • Exemplo1b
  • Exemplo1c
• A partir da liberação da versão HTML5, algumas modificações foram incluídas e facilitaram muito a vida dos desenvolvedores. Uma delas, é a forma de declarar o documento, basta efetuar da forma indicada no Exemplo1d.

Observação:

• Todo o texto indicado entre <!--comentário--> são comentários de códigos de HTML.

Exemplo1a - HTML 4.01 Strict (Não se utiliza mais)

<!-- HTML 4.01 Strict --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <title> Título da Página </title>
    </head>
    <body>
        ... inserir seu conteúdo aqui ...
    </body>
</html>

Exemplo1b - HTML 4.01 Transitional (Não se utiliza mais)

<!-- HTML 4.01 Transitional --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <title> Título da Página </title>
    </head>
    <body>
        ... inserir seu conteúdo aqui ...
    </body>
</html>

Exemplo1c - HTML 4.01 Frameset (Não se utiliza mais)

<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">  
<html>
    <head>
        <meta charset="utf-8">
        <title> Título da Página </title>
    </head>
    <body>
        ... inserir seu conteúdo aqui ...
    </body>
</html>

Exemplo1d - HTML5 e para as futuras versões (É utilizado atualmente)

<!-- HTML5 em diante -->
<!DOCTYPE html> 
<html> <!-- Inicio do HTML -->
    <head> <!-- Início do Cabeçalho da Página -->
        <meta charset="utf-8"> <!-- Definição do charset a ser utilizado -->
        <title> Título da Página </title> <!-- Definição do Título da Página -->
    </head>
    <body> <!-- Início do Corpo do Documento -->
        ... inserir seu conteúdo aqui ...
    </body> <!-- Fim do Corpo do Documento -->
</html> <!-- Fim do HTML -->

4.2 <html>...<html>

• Representa a raiz do documento, serve como um container que engloba todos os elementos HTML.

<!DOCTYPE html> 
<html> <!-- Inicio do HTML -->
    <head> 
        <meta charset="utf-8"> 
        <title> Título da Página </title> 
    </head>
    <body> 
        ... inserir seu conteúdo aqui ...
    </body> 
</html> <!-- Fim do HTML -->

4.3 <head>...</head>

• Compreende as informações do documento que serão interpretadas pelos navegadores. Inclui-se nessa seção as metatags (metadados). Como por exemplo, o link para a folha de estilos CSS, o título do documento etc.

<!DOCTYPE html> 
<html> 
    <head> <!-- Início do Cabeçalho da Página -->
        <meta charset="utf-8"> 
        <title> Título da Página </title> 
    </head> <!-- Fim do Cabeçalho da Página -->
    <body> 
        ... inserir seu conteúdo aqui ...
    </body> 
</html>

4.4 <meta>

• São as metatags (metadados). São informações sobre os dados do documento HTML. Utiliza-se uma combinação de caracteres que indicam o tipo de encoding, autor, local, configuraçoes etc.
• Utilizada sempre dentro da tag <head>..</head>.
• Representa vários tipos de dados.
• E o que são metadados?
  • São informações que descrevem o conteúdo do seu arquivo.

• E o atributo charset = “utf-8”, para que serve?
  • Serve para indicar o formato de codificação de caracteres utilizado no documento.
  • Exemplos de charset: ASCII, UTF-8, ANSI e ISO-8859-1.
  • O charset UTF-8 é o que usamos na web atual e faz parte de um padrão chamado Unicode. Com ele podemos representar qualquer caractere de qualquer idioma. Ao usar o atributo charset="utf-8" de nosso arquivo estamos dizendo ao navegador: quando for ler esse arquivo, use as regras do charset UTF-8.

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8"> <!-- Definição do charset a ser utilizado -->
        <title> Título da Página </title> 
    </head>
    <body> 
        ... inserir seu conteúdo aqui ...
    </body> 
</html>

4.5 <title>...</title>

• Utilizada sempre dentro da tag <head>...</head>.
• Representa o título da página, o qual será exibido na aba do navegador.

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8"> 
        <title> Título da Página </title> <!-- Definição do título da página -->
    </head>
    <body> 
        ... inserir seu conteúdo aqui ...
    </body> 
</html>

4.6 <link>

• É uma tag que contém apenas atributos e faz a relação do documento HTML com recursos externos. Utilizada para vincular a folha de estilos CSS, e também o ícone da aba do navegador etc.
• Utilizada sempre dentro da tag <head>...</head>.

4.6.1. Inserindo uma folha de estilo CSS externa (arquivo .css externo)

• Há duas formas de inserirmos o CSS ao HTML:
  • 1. Inserindo o código do arquivo de estilos de CSS dentro do próprio HTML, entre as tags de início e fim de cabeçalho <head>...</head>:
       • Após as tags de título da página dentre do cabeçalho, inserir as tags de início e fim de estilos, utilizando <style>...</style>.
  • 1. Criando um arquivo externo, e dentro do HTML, também no <head>...</head>>, especificar o link para este arquivo.
       • Após as tags de título da página dentre do cabeçalho, inserir as tags <link rel="stylesheet" href="caminhodoArquivo/nomeArquivo.css">.
       • Em seguida, no editor, criar o arquivo com extensão .css no caminho especificado.

• Sintaxe: <link rel="stylesheet" href="caminhodoArquivo/nomeArquivo.css">

<!-- Inserindo o arquivo de estilo CSS como externo ao HTML -->
<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title> Título da Página </title> 
        <link rel="stylesheet" href="caminhodoArquivo/nomeArquivo.css">  <!--link para o arquivo de formatação com extensão .css-->
    </head> 
    <body> 
        <!-- Omitido para facilitar o entendimento -->
    </body>
</html>

4.6.2. Inserindo as formatações da folha de estilo CSS no próprio código HTML

• Sintaxe: <style> ... Inserir seu código CSS aqui ... </style>

<!-- Inserindo o arquivo de estilo CSS no próprio HTML -->
<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title> Título da Página </title> 
        <style> 
            ... Inserir seu codigo CSS aqui ... 
        </style>
    </head>
    <body> 
        <!-- Omitido para facilitar o entendimento -->
    </body>
</html>

4.6.3. Utilizando <link> com favicon

• Podemos adicionar antes do endereço da página do site, um ícone pequeno, conhecido como favicon.

• Importante: Verifique o local (pasta) corretamente onde está armazenado seu ícone e faça a indicação do caminho em href= " " (Hypertext Reference).

• Gerando seu próprio Favicon.
• Consulte o artigo Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?.
• Consulte também, o artigo The 2020 Guide to FavIcons for Nearly Everyone and Every Browser.
• Para aprofundar, consulte O que é um Favicon, Porque o Seu Website Precisa de Um, e Como o Criar.

• Sintaxe: <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <!-- Favicon Inserido no Cabeçalho -->
        <title> Título da Página </title> 
    </head>
    <body> 
        <!-- Omitido para facilitar o entendimento -->
    </body>
</html>

4.7. <body>...</body>

• Local onde é inserido o conteúdo que será exibido na página pelo navegador. Pode conter textos, imagens, vídeos, links e etc.

4.8. <script>...</script>

• Esse elemento contém instruções de script ou aponta para um arquivo de script externo por meio do atributo src.
• Inicialmente, funcionava somente no <head>...</head>, porém com a evolução, pode-se ser utilizado no <body>...</body> também.

4.9. Utilizando tags de títulos

Código HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> Título h1: Seção I. Tamanho: 32px. </h1>
        <h2> Título h2: Capítulo I. Tamanho: 24px.  </h2>
        <h3> Título h3: Título I. Tamanho: 20.8px.  </h3>
        <h4> Título h4: Subtítulo I. Tamanho: 16px.  </h4>
        <h5> Título h5: Subtítulo II. Tamanho: 12.8px.  </h5>
        <h6> Título h6: Subtítulo III. Tamanho: 11.2px.  </h6>
    </body>
</html>

Figura 2: Exemplos de tags HTML de títulos

Fonte: Autoria própria

4.10. Tags de conteúdos de blocos e linhas

4.10.1. <p>...</p>: tag de parágrafo

• São elementos em bloco.
• De acordo com MDN Web Docs, "o elemento HTML Parágrafo representa um parágrafo do texto. Parágrafos são, geralmente, representados em mídia visual, como bloco de texto que são separados dos blocos adjacente por espaços brancos verticais e/ou recuo de primeira-linha. Parágrafos são elementos em bloco".
• Texto extraído de https://bra.ifsp.edu.br/ifsp-bra/82-instituto-federal-de-sao-paulo.

Código HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> O Instituto Federal de São Paulo (IFSP) foi fundado inicialmente em 1909, com o nome de Escola de Aprendizes Artífices. Durante seus 100 anos de história, também recebeu os nomes de Escola Técnica Federal de São Paulo (ETFSP) e Centro Federal de Educação Tecnológica de São Paulo (CEFET-SP), sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
        <p> Convertido como Instituto pela Lei nº 11.892, o IFSP passou a ter relevância de universidade, destacando-se pela autonomia. Com a mudança, o IFSP passou a destinar 50% das vagas para os cursos técnicos e, no mínimo, 20% das vagas para os cursos de licenciatura, sobretudo nas áreas de Ciências e da Matemática. Complementarmente, continua oferecendo cursos de Formação Inicial e continuada, Tecnologias, Engenharias e Pós-graduação. <p>
        <p> O IFSP é organizado em estrutura multicampi e possui aproximadamente 24 mil alunos matriculados nos 38 campi e mais 4 mil alunos nos 19 polos de educação a distância distribuídos pelo estado de São Paulo. </p>
    </body>
</html>

Figura 3: Exemplo de uso de tag de parágrafo

Fonte: Autoria própria

4.10.2. <div>...</div>: tag de divisão

• São elementos em blocos.
• De acordo com MDN Web Docs, "o elemento HTML de Divisão é um container genérico para conteúdo de fluxo, que de certa forma não representa nada. Ele pode ser utilizado para agrupar elementos para fins de estilos (usando class ou id), ou porque eles compartilham valores de atributos, como lang. Ele deve ser utilizado somente quando não tiver outro elemento de semântica (tal como <article> ou <nav>)".
• Texto extraído de https://bra.ifsp.edu.br/ifsp-bra/82-instituto-federal-de-sao-paulo.

Código HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <div> <strong>Divisão 1</strong>   <!--- inicio div 1 -->
            <h1> IFSP - Bragança Paulista  </h1>
            <p> O Instituto Federal de São Paulo (IFSP) foi fundado inicialmente em 1909, com o nome de Escola de Aprendizes Artífices. Durante seus 100 anos de história, também recebeu os nomes de Escola Técnica Federal de São Paulo (ETFSP) e Centro Federal de Educação Tecnológica de São Paulo (CEFET-SP), sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
            <div> <strong>Divisão 2 - Dentro da Divisão 1</strong>   <!--- inicio div 2 -->
                <p> Convertido como Instituto pela Lei nº 11.892, o IFSP passou a ter relevância de universidade, destacando-se pela autonomia. Com a mudança, o IFSP passou a destinar 50% das vagas para os cursos técnicos e, no mínimo, 20% das vagas para os cursos de licenciatura, sobretudo nas áreas de Ciências e da Matemática. Complementarmente, continua oferecendo cursos de Formação Inicial e continuada, Tecnologias, Engenharias e Pós-graduação. <p>
                <p> O IFSP é organizado em estrutura multicampi e possui aproximadamente 24 mil alunos matriculados nos 38 campi e mais 4 mil alunos nos 19 polos de educação a distância distribuídos pelo estado de São Paulo. </p>
            </div>   <!--- fim div 2 -->
        </div>  <!--- fim div 1 -->
    </body>
</html>

Figura 4: Exemplo de uso de tag de divisão

Figura 4: Exemplo de uso de tag de divisão
Fonte: Autoria própria

4.10.3. <strong>...</strong>: tag de importância | negrito

• São elementos em linhas.
• Destaca em negrito o conteúdo inserido entre as tags de início e fim.
• De acordo com MDN Web Docs, "o elemento HTML em negrito dá uma forte importância ao texto que está sendo destacado com negrito".
• Texto extraído de https://bra.ifsp.edu.br/ifsp-bra/82-instituto-federal-de-sao-paulo.

Observação:

• A tag <b>...</b> também é utilizada para destacar o texto em negrito, porém, foi substituída pela tag <strong>..</strong> que possui um significado semântico.

Código HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> O Instituto Federal de São Paulo <strong>(IFSP)</strong> foi fundado inicialmente em 1909, com o nome de Escola de Aprendizes Artífices. Durante seus 100 anos de história, também recebeu os nomes de Escola Técnica Federal de São Paulo <strong>(ETFSP)</strong> e Centro Federal de Educação Tecnológica de São Paulo (CEFET-SP), sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
    </body>
</html>

Figura 5: Exemplo de uso de tag de importância

Fonte: Autoria própria

4.10.4. <em>...</em>: tag de ênfase | itálico

• São elementos em linhas.
• Destaca em itálico o conteúdo inserido entre as tags de abertura e fechamento.
• De acordo com MDN Web Docs, "o elemento HTML enfatizador marca o texto que tem ênfase. Ele pode ser aninhado, com cada nível de aninhamento indicando um grau maior de ênfase".
• Texto extraído de https://bra.ifsp.edu.br/ifsp-bra/82-instituto-federal-de-sao-paulo.

Observação:

• A tag <i>...</i> também é utilizada para destacar o texto em itálico, porém, foi substituída pela tag <em>...</em> que possui um significado semântico.

Código HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> O Instituto Federal de São Paulo <strong>(IFSP)</strong> foi fundado inicialmente em 1909, com o nome de <em>Escola de Aprendizes Artífices</em>. Durante seus 100 anos de história, também recebeu os nomes de <em>Escola Técnica Federal de São Paulo <strong>(ETFSP)</strong></em> e <em>Centro Federal de Educação Tecnológica de São Paulo</em> <strong>(CEFET-SP)</strong>, sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
    </body>
</html>

Figura 6: Exemplo de uso de tag de ênfase

Fonte: Autoria própria

4.10.5. <sup>...</sup>: tag para inserir o texto na posição superior à base

• São elementos em linhas.
• De acordo com MDN Web Docs, "o elemento destaca o texto para posicioná-lo acima da linha de base". Exemplo: o uso de um número elevado a outro.

Código HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> Na matemática, ao efetuarmos o cálculo de um número elevado a outro, representamos este cálculo assim: 10<sup>3</sup>, o que significa que estou elevando o número 10 a 3, sendo a mesma coisa que 10 x 10 x 10. </p>
    </body>
</html>

Figura 7: Exemplo de uso de tag para elevar o texto inserido entre as tags de abertura e fechamento

Fonte: Autoria própria

4.10.6. <sub>...</sub>: tag para inserir o texto na posição inferior à base

• São elementos em linhas.
• De acordo com MDN Web Docs, "o elemento destaca o texto para posicioná-lo abaixo da linha de base". Exemplo: a representação do símbolo químico da água H2O, onde o 2 deve ser posicionado abaixo.

Código HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> Na química, o símbolo da água é: H<sub>2</sub>O. </p>
    </body>
</html>

Figura 8: Exemplo de uso de tag para inserir o texto indicado entre as tags de abertura e fechamento, na posição abaixo da base

Fonte: Autoria própria

4.10.7. <a href="...">...</a>: tag de inserção de hyperlink

• São elementos em linhas.
• De acordo com MDN Web Docs, "o elemento HTML hyperlink, ou âncora, cria com o atributo href, uma hiperligação nas páginas web, arquivos, endereços de emails, ligações na mesma página ou endereços na URL".
• É um texto ou imagem que ao ser selecionado, direciona o usuário para:
  • Outra página.
  • Uma parte do texto da própria página (#book).
  • Ou um link local, email.
• Exemplos:
  • Link para uma página externa: <a href="http://google.com">Site</a> Saída: Site
  • Link para um arquivo/página local: <a href="contatos.html">Página</a>Saída: Página
  • Link para um elemento da própria página: <a href="#detalhes">Elemento</a> Saída: Elemento
  • Link para um email (será utilizado o software de email do computador): <a href="maito:paulagiancoli@ifsp.edu.br">Email</a> Saída: Email
• Estados do hiperlink:
  • unvisited (azul e subscrito)
  • visited (roxo e subscrito)
  • active (vermelho e subscrito).

Código HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> <a href="https://bra.ifsp.edu.br">IFSP-BRA</a></p>
        <p> <a href="mailto:paulagiancoli@ifsp.edu.br">E-mail Profa.</a></p>
        <p> <a href="tel:+551133956789">Ligar para</a></p>
    </body>
</html>

Figura 9: Exemplo de uso de tag de hyperlink

Fonte: Autoria própria

4.10.8. <img src="..." alt="...">: tag de inserção de imagens

• São elementos em linhas.
• De acordo com MDN Web Docs, "o elemento HTML Imagens (or HTML Image Element) representa a inserção de imagem no documento, sendo implementado também pelo HTML5 para uma melhor experiência com o elemento <figure> e <figcaption>".

Código HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> <img src="imagens/logoDWE.jpg" alt="A imagem refere-se ao logo da disciplina DWE."> </p>
    </body>
</html>

Figura 10: Exemplo de uso de tag de imagens

Imagem existe no local indicado		Imagem não localizada, exibe o conteúdo do atributo alt
Fonte: Autoria própria		Fonte: Autoria própria

4.10.9. <figure>...</figure>: tag de inserção de figuras

• De acordo com MDN Web Docs, "o elemento HTML Figuras representa o conteúdo independente, frequentemente com uma legenda <figcaption>...</figcaption>, e é normalmente referido como uma única unidade.
• Enquanto ela está relacionada com o fluxo principal, sua posição é independente do fluxo principal. Normalmente, isso é uma imagem, uma ilustração, um diagrama, um trecho de código ou uma esquema que é referenciado no texto principal, mas que pode ser movido para outra página ou para um apêndice, sem afetar o fluxo principal".

Código HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <p>
            <h1> IFSP - Bragança Paulista  </h1>
            <figure>
                <img src="imagens/logoDWE.jpg" alt="A imagem refere-se ao logo da disciplina DWE.">
                <figcaption>Fig.1 - Logo da Disciplina DWE.</figcaption>
            </figure>
        </p>
    </body>
</html>

Figura 11: Exemplo de uso de tag de figuras

Fonte: Autoria própria

4.10.10. <del>...</del> e <ins>...</ins> e <s>...</s>: tag de demarcação de edição, inserção, texto irrelevante e incorreto

• São elementos em blocos.

• De acordo com MDN Web Docs - <del>, "o elemento HTML <del> (ou Elemento HTML de Texto Excluído) representa uma parte do texto que foi excluída de um documento. Este elemento é (não necessariamente) renderizado pelos navegadores com uma linha entre o texto.".

• De acordo com MDN Web Docs - <ins>, normalmente o elemento HTML <del> é utilizado em conjunto com o elemento HTML <ins> (ou Elemento HTML de Texto Incluído) que representa a faixa de texto inserida após a demarcação de exclusão.

• De acordo com MDN Web Docs - <s>, "o elemento HTML <s> renderiza um texto tachado ou uma linha cortando o texto. Use o elemento <s> para representar textos que não sejam relevantes ou que não estam corretos. Não é apropriado o uso do <s> para indicar edições no texto; para indicar edições no texto utilize <del> e <ins>, que são elementos mais apropriados".

Código HTML

<!DOCTYPE html>
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> O Instituto Federal de São Paulo (IFSP) foi fundado inicialmente em 1909, <del>com o nome de Escola de Aprendizes Artífices. Durante seus 100 anos de história, também recebeu os nomes de Escola Técnica Federal de São Paulo (ETFSP)</del> <ins>com o nome de Centro Federal de Educação Tecnológica de São Paulo (CEFET-SP)</ins>, sendo reconhecido pela sociedade paulista por sua excelência no <s>ensino público gratuito de qualidade</s>. </p>
    </body>
</html>

Saída:

Figura 12: Exemplo de uso de tag de edição, inserção e irrelevante

Fonte: Autoria própria

---

Referências

• Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.

---

---

ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.

</div> </div>